<template>
    <view class="page-wrap">
        <scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
            <view class="list-item" v-for="(item, index) in list" :key="index" @click="toAdd(item.id)">
                <view class="left">
                    <view class="station">{{item.stationName}}</view>
                    <view class="codes text-cut-2">{{item.expressCodes}}</view>
                </view>
                <view class="right">
                    <view class="pay-status">
                        <text v-if="item.deliveryStatus == 'FINISH'"
                            class="finish">{{item.deliveryStatusName}}</text>
                        <text v-else-if="item.deliveryStatus">{{item.deliveryStatusName}}</text>
                        <text v-else
                            :class="{cancel: item.payStatus == 'CANCELED', paying: item.payStatus != 'PAYED'}">{{item.payStatusName}}</text>
                    </view>
                    <view class="time">{{item.createDate}}</view>
                </view>
            </view>
        </scroll-list>
        <global-components ref="global-components" :loading="false"></global-components>
    </view>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    export default {
        data() {
            return {
                list: [],
                option: {
                    size: 10, // 分页大小
                    auto: true // 自动加载列表
                },
            };
        },
        methods: {
            // 加载数据
            load(paging) {
                this.$api.order.page({
                    ...paging,
                }).then(res => {
                    console.log('orders', res)
                    this.list = this.list.concat(res.list);
                    // 加载成功
                    this.$refs.list.loadSuccess({
                        list: this.list,
                        total: Number(res.total)
                    });
                })
            },
            // 刷新刷剧
            refresh(paging) {
                this.$api.order.page({
                    ...paging,
                }).then(res => {
                    console.log('orders', res)
                    this.list = res.list;
                    // 加载成功
                    this.$refs.list.refreshSuccess({
                        list: this.list,
                        total: Number(res.total)
                    });
                })
            },
            toAdd(id) {
                this.$toPage({
                    url: '/pages/main/add?id=' + id
                });
            },
        },
        watch: {},
        onLoad(option) {},
        onShow() {},
        onHide() {},
        onUnload() {},
        onReachBottom() {},
        onPageScroll(event) {},
        onPullDownRefresh() {},
        onShareAppMessage(options) {}
    };
</script>

<style scoped lang="scss">
    .page-wrap {
        background: #fff;
        padding: 0 32rpx;

        .list-item {
            padding: 32rpx 0;
            border-bottom: 1rpx solid #eee;
            display: flex;

            .left {
                flex-grow: 1;
                width: 1px;

                .station {
                    font-size: 32rpx;
                    margin-bottom: 12rpx;
                }

                .codes {
                    font-size: 28rpx;
                    color: #aaa;
                }
            }

            .right {
                flex-shrink: 0;
                width: 280rpx;
                text-align: right;

                .pay-status {
                    color: $primary-color;

                    .finish {
                        color: $success-color;
                    }

                    .paying {
                        color: $error-color;
                    }

                    .cancel {
                        color: $warning-color;
                    }
                }

                .time {
                    font-size: 0.8em;
                    opacity: 0.8;
                    padding-top: 15rpx;
                }
            }
        }
    }
</style>